<template>
	<view class="repair-wrap">
		
		<view >
			<view class="u-m-t-20 repair-box" style="padding: 15px 30px;">
				<view class="repair-titel u-m-b-20">
					<view style="display: flex;justify-content: center;border-bottom:2rpx solid #eee;padding-bottom: 20rpx;">
							<h2>{{userObj.file_title}}</h2>
					</view>
				</view>
				<view style="color: #999999;margin-top: 20px;font-size: 15px;" class="flexClsNowrapSpcBtw">
					<view>文件类型：</view><span style="color:#000">{{userObj.file_type}}</span>
				</view>
				<view style="color: #999999;margin-top: 20px;font-size: 15px;" class="flexClsNowrapSpcBtw">
					<view>文件编号：</view><span style="color:#000">{{userObj.file_number}}</span>
				</view>
				<view style="color: #999999;margin-top: 20px;font-size: 15px;" class="flexClsNowrapSpcBtw">
					<view>适用单位：</view><span style="color:#000">{{userObj.org_name}}-{{userObj.project_name}}</span>
				</view>
				<view style="margin-bottom: 20rpx;color: #999999;margin-top: 20px;font-size: 15px;" >
					<view>文件说明：</view><view style="color:#000;margin-top: 20rpx;text-indent: 2em;">{{userObj.file_text}}</view>
				</view>
				
				<view style="border-top: 2rpx solid #eee;display: flex;justify-content: space-between;padding-top: 10px;color: #999999;font-size: 15px;">
					<view>上传人：{{userObj.user_name}}</view>
					<view>{{userObj.create__time}}</view>
				</view>
				<view style="padding-top: 20px;"  v-for="(item, index) in fileList" id="appList" :key="index">	
					<view>
						<image @click="preview(item)" :src="item" mode=""></image>
					</view>
				</view>
				<!-- <view style="padding-top: 20px;font-size: 17px;" v-show="this.showClick==true">
					<span style="color: blue;" @click="selectClick">点击预览详情</span>
				</view> -->
				
			</view>
		</view>
		<view class="pt-4 pb-2 pl-4 pr-4">
			<u-button type="default" @click="toPage(userObj.file_path)" style="background: linear-gradient(180deg, #76D904 0%, #417505 100%);color:#fff" shape='circle'>点击预览详情</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showClick:false,
				showFlag:false,
				pageIndex:1,
				loading: false,
				// type: 1,
				nextPage:false,
				userObj:{},
				src:null,
				fileList:[],
			}
		},
		onLoad(options) {
			const item = JSON.parse(decodeURIComponent(options.item))
			this.userObj =item
			
			console.log(this.userObj)
			//
			var fileType=this.userObj.file_type
			if(fileType=='png'|| fileType=='jpg'){
				//图片直接展示，图片可上传多张
				this.fileList=this.userObj.file_path.split(',');
			}else{
				//doc，pdf，等，只可上传一个
				//展示查看按钮
				this.showClick=true;
				this.src = `http://view.xdocin.com/xdoc?_xdoc=`+this.userObj.file_path;
				console.log(this.src)
			}
			console.log(this.userObj)
			
		},
		methods: {
			toPage(url){
				console.log(url)
			 uni.navigateTo({
			  url: './pdf?url='+url
			 })
			},
			selectClick(){
				uni.downloadFile({
				  url: this.userObj.file_path,
				  success: function (res) {
					var filePath = res.tempFilePath;
					uni.openDocument({
					  filePath: filePath,
					  showMenu: true,
					  success: function (res) {
						console.log('打开文档成功');
					  },
					  fail() {
					  	console.log('打开文档失败');
					  }
					});
				  }
				});
			},
			// 图片预览
			preview(item) {
				uni.previewImage({
					urls: [item],
					current: 0,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}
	.repair-titel i{
		width: 6px;
		height: 13px;
		background: linear-gradient(180deg, #76D904 0%,#417505 100%);
		border-radius: 4px;
		display: inline-block;
		vertical-align: middle;
		margin-top: 4px;
	}
	.yilingqu{
		width: 80%;
		height: 84rpx;
		// background:#F9A832;
		// background-color: #F9A832;
		background: linear-gradient(180deg, #76D904 0%,#417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
</style>
